<%-- 
    Document   : ShoppingCart
    Created on : 2014/4/23, 下午 04:24:28
    Author     : Gjun
--%>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page contentType="text/html" pageEncoding="UTF-8"%>

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script type="text/javascript" src="/playdoll/js/jquery-1.10.2.min.js"></script>
        <title>JSP Page</title>
        <script>
            $(function(){
                
                
            
                $("#continueBUY").click(function(){
                      window.location = "../home";
                })
                
                 $("#Pay").click(function(){
                   
                    // window.location = "../shop/finish";
                    
                    $("#gopay").submit();
                })
                
                });
        </script>
        
        
        <style type="text/css"> 
body {  margin:0; 
		padding:0;
		font: 100%/1.4 '標楷體',Verdana, Arial, Helvetica, sans-serif;	
		background-color: #000000;			
	 }
.container  {           width:85%;
			 max-width: 1260px;/* 建議您使用最大寬度，如此版面在大型螢幕上就不致於過寬，讓行保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			 min-width: 780px;/* 建議您使用最小寬度，如此版面在大型螢幕上就不致於過窄，讓行在側欄中保持比較方便閱讀的長度。IE6 並不適用這項宣告。 */
			 margin: 0 auto; /* 兩側的自動值與寬度結合後，版面便會置中對齊。如果將 .container 的寬度設為 100%，就不需要這麼做。 */
			 color: #ffffff;
			 font-size: 14px;
			 text-align: justify;}

.header {display:block;}			 
			 
.wrappers { 
		   width:324px; 
		   height:484px; 
	  	   border:5px solid #ccc; 
		   background:#ddd;		   
		   <!--float:left;-->
		   		   
		 }
		   
.content {
		  width:600px;
		  height:650px;
		  margin-left:0px;
		  float:right;		  
		  
}
		   

#astyle {
		 width:335px;
		 height:160px;
		 margin:0;
        }
.legend {
                  color : #ffffff ;
                  font: 100%/1.4 '標楷體',Verdana, Arial, Helvetica, sans-serif;
                   font-size: 18px;
                   font-weight: bold
        }

 </style> 
      
    </head>
    <body>
  
        <div class="container">
         <div class="header">
           
         
	         <%@include  file="../WebTool/Top_bar.jsp" %>
		 <%@include  file="../WebTool/Logo.jsp" %>
		 
	</div>
                 <p> <h1 align="center">結帳確認頁</h1></p>
        <fieldset >
            <legend class="legend"><h1>您的商店如下</h1></legend>
            <form action="../shop/finish" method="post" id="gopay">
            <div id="price">  
            <table id="CartList" width="90%" cellpadding="10" align="center" class="legend">
            <tr>
                <td align="center" style="width:10% ">產品縮圖</td>
                <td align="center">產品名稱</td>
                <td align="center">產品種類</td>
                <td align="center">單價</td>
                <td align="center">數量</td>
                <td align="center">金額小計</td>
            </tr>
     
            <c:forEach items="${Cart}" var="item">
                <c:if test="${item['quantity']!='0'}">
                <tr>
                    <td > <img src="../WebTool/GetPicwithzoom.jsp?pid=${item["id"]}&x=60&y=60&pp=1"></td>
                    <td align="center">${item["name"]}</td>
                    <td align="center">${item["type"]}</td>
                    <td align="center">${item["price"]}</td>
                    <td align="center">${item["quantity"]}</td>
                    <td align="center">${item["subTotal"]}</td>
                </tr>
            </c:if>
            </c:forEach> 
        </table>  
            <table width="600" cellpadding="10" align="center" class="legend">
            <tr>
                <td align="right"><b>運費：</b></td>
                <td>${shipping}</td>
                <td align="right"><b>小計：</b></td>
                <td>${amount}</td>
            </tr>
            <tr>
                <td align="right">&nbsp;</td>
                <td>&nbsp;</td>
                <td align="right"><b>總金額：</b></td>
                <td>${total}</td>
            </tr>            
        </table>
            
            </div>
         
            <table width="800" cellpadding="10" align="left" class="legend">
            <tr>
            <tr><td align="left">收件人姓名 :<input type="text" id="uname" name="uname" value="${User}"><br></td></tr>
            <tr><td align="left" >收件人地址 : <input type="text" id="uaddress" name="uaddress" value="${address}" style="width:600px;"><br></td></tr>
            <tr><td align="left" >收件人Email : <input type="text" id="uemail" name="uemail" value="${mail}" style="width:600px;"><br></td></tr>
            <tr><td align="left">運送方式：
                        <select id="delivery" class="" name="delivery" >
                            <option>黑貓宅急便</option>
                            <option>黑豬宅急便</option> 
                            <option>黑狗宅急便</option> 
                            <option>黑羊宅急便</option> 
                        </select>
            </tr>
         </table>
         <table width="600" cellpadding="10" align="center" class="legend">
            <tr>
                <td align="center"><input type="submit" id="Pay" value="確認購買"></td>
                <td align="center"><input type="button" id="continueBUY" value="再逛逛"></td>
            </tr>
         </table>
        </form>
        </fieldset>
          <%@include  file="../WebTool/Footer.jsp" %>
          
          </div>
    </body>
        
</html>
